<div id="playbackPanelWrapper" class="row hidden-xs hidden-sm">
  <div id="leftPanel">
    <track-manager type="knob"></track-manager>
  </div>
  <div ng-if="!playback.matchmediaService.isPhone" id="centerPanel">
    <track-info></track-info>
  </div>
  <div ng-if="!playback.matchmediaService.isPhone" id="rightPanel">
    <volume-manager type="knob"></volume-manager>
  </div>
</div>

<div id="playbackPanelWrapper" class="row mobile hidden-md hidden-lg hidden-xl" style="display: flex; flex-direction: column;">

  <div id="goBackPanelWrapper" class="col-xs-24 text-center" style="flex-shrink: 0;">
    <a ng-click="playback.goBack()">
      <i id="closePlaybackPanelWrapper" class="material-icons">
        arrow_drop_down
      </i>
    </a>
  </div>

  <div id="albumartContainer" class="col-sm-24 col-sm-offset-0" style="flex-grow: 1;">
    <div ng-if="playback.playerService.state.albumart" class="cover-art-container">
      <img
        ng-if="playback.playerService.state.albumart"
        ng-src="{{playback.playerService.albumart}}"
        alt="{{playback.playerService.state.album}}"/>
      <i
        ng-if="playback.playerService.state.icon"
        ng-class="playback.playerService.state.icon">
      </i>
    </div>
  </div>

  <div class="col-xs-24" style="flex-shrink: 0;">
    <div class="row">
      <div class="col-xs-24 text-center track-info-container">
        <track-info is-in-footer="true"></track-info>
      </div>

      <div class="col-xs-24 track-info-rates text-center">
          <span class="track-info-type" ng-if="playback.playerService.state.trackType !== 'webradio'">
            <img
              ng-if="playback.playerService.state.fileFormat"
              ng-src="{{'/app/assets-common/format-icons/' +
                playback.playerService.state.fileFormat.url + '.svg'}}"
              alt="{{playback.playerService.state.fileFormat.name}}" />
            <span ng-if="!playback.playerService.state.fileFormat">
              {{playback.playerService.state.playback}}
            </span>
          </span>
        <span>
            {{playback.playerService.state.samplerate}}
          </span>
        <span ng-if="playback.playerService.state.bitdepth">
            {{playback.playerService.state.bitdepth}}
          </span>

          <span ng-if="!playback.playerService.state.bitdepth && !playback.playerService.state.samplerate && playback.playerService.state.bitrate">
              {{playback.playerService.state.bitrate}}
            </span>
      </div>

      <div class="col-xs-24 track-button-container">
        <div
          id="trackButtonBar"
          class="btn-group"
          ng-include src="'app/themes/volumio3/components/track-manager/elements/volumio3-track-manager-button-bar.html'">
        </div>
      </div>

      <div class="col-xs-22 col-xs-offset-1 col-sm-16 col-sm-offset-4 player-seekbar-container">
        <player-seekbar></player-seekbar>
      </div>

      <div class="col-xs-24 player-buttons-container">
        <player-buttons ></player-buttons>
      </div>
    </div>
  </div>

</div>

<multi-room-dock></multi-room-dock>
